<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组织管理</title>
    <link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/myIndex.css">
</head>

<body>
    <input id="treeId" type="hidden">
    <input id="treeName" type="hidden">

    <div id="targetArea">
        <div class="treeOprate">  
              <button class="layui-btn" id="addTree">新增</button>
              <button class="layui-btn layui-btn-normal" id="deleteTree">删除</button>
              <button class="layui-btn layui-btn-danger" id="disableTree">禁用</button>
              <button class="layui-btn layui-btn-warm" id="enableTree">启用</button>
        </div>
        <ul id="demo" style="background: #f0f0f0"></ul>
    </div>

    <script src="./plugins/layui/layui.js"></script>
    <script>
        layui.use(['layer','tree','jquery'], function(layer,tree,$) {
            layui.tree({
              elem: '#demo',
              nodes: [ //节点
                      {
                        name: '我的邮箱',
                        id: 1,
                        spread: true,
                        children: [
                          {
                            name: 'QQ邮箱',
                            id: 21,
                            spread: true,
                            children: [
                              {
                                name: '收件箱'
                                ,id: 211
                                ,children: [
                                  {
                                    name: '所有未读'
                                    ,id: 2111
                                  }, {
                                    name: '置顶邮件'
                                    ,id: 2112
                                  }, {
                                    name: '标签邮件'
                                    ,id: 2113
                                  }
                                ]
                              }, 
                              {
                                name: '已发出的邮件'
                                ,id: 212
                              }, 
                              {
                                name: '垃圾邮件'
                                ,id: 213
                              }
                            ]
                          }, {
                            name: '阿里云邮',
                            id: 22,
                            children: [
                              {
                                name: '收件箱',
                                id: 221
                              }, 
                              {
                                name: '已发出的邮件',
                                id: 222
                              }, 
                              {
                                name: '垃圾邮件',
                                id: 223
                              }
                            ]
                          }
                        ]
                      }
                    ],
                    click: function(node){
                        $("#treeId").val(node.id);
                        $("#treeName").val(node.name); 
                    }       
            });

            //设置点击区域颜色
            $("body").on("mousedown",".layui-tree a",function(){ 
                $(".layui-tree a").css({'color':'#555','background':'#f0f0f0'}); 
                $(this).css({'color':'#fff','background':'lightblue'}) 
            });

            //设置区域隐藏点击后的颜色 -还原    
            $(document).click(function(event){
                var _con = $('#targetArea');  // 设置目标区域
                if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
                   $(".layui-tree a").css({'color':'#555','background':'#f0f0f0'});
                   $("#treeId").val(""); 
                   $("#treeName").val(""); 
                }
            }); 

            $("#addTree").click(function(event){
                var treeId = $("#treeId").val();
                if(!treeId && treeId == ""){
                    layer.msg("请选择节点进行增加！",{icon:5});
                    return;    
                }
            });

            $("#deleteTree").click(function(event){
                validateTree(function(){
                    console.log('执行ajax')
                });
            });

            $("#disableTree").click(function(event){
                validateTree(function(){
                    console.log('执行ajax')
                });
            });

            $("#enableTree").click(function(event){
                validateTree(function(){
                    console.log('执行ajax')
                });
            });
            
            //验证
            function validateTree(fn){
                var treeId = $("#treeId").val();
                if(!treeId && treeId == ""){
                    layer.msg("请选择节点进行操作！",{icon:5});
                    return;    
                }
                if(treeId && treeId == 1){
                    layer.msg("顶级节点不能被操作！",{icon:5});
                    return;    
                }
                if(fn){
                    fn();
                }
            }

        });


        
    </script>
</body>

</html>